<template>
  <div class='main-top-bar'>
    <top-bar class='home-top'>
      <div class="logo">
        <img src="~assets/img/logo.png" alt="">
        <span>网易云音乐</span>
      </div>
      <!-- 登录和退出组件 -->
      <top-bar-item>
        <img src="~assets/img/common/logo.png" slot='item-pic' class="topbar-headerpic" alt="">
        <el-button type="text" class='item1' slot='item-text1' @click="topBarBtn()">登录</el-button>
        <el-button type="text" slot='item-text2'>退出</el-button>
      </top-bar-item>
    </top-bar>
  </div>
</template>

<script>
import TopBar from 'components/common/topbar/TopBar.vue'
import TopBarItem from 'components/common/topbar/TopBarItem.vue'
export default {
  name: 'MainTopBar',
  data () {
    return {
      // loginDialog: false
    }
  },
  components: {
    TopBar,
    TopBarItem
  },
  methods: {
    topBarBtn () {
      this.$store.commit('loginVisible', true)
    }
  }
}
</script>

<style lang="less" scoped>
  .main-top-bar {
    text-align:center;
    background-color: #242424;
  }
  .home-top {
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    line-height:34px;
    margin-left: 50px;
    img {
      display:inline-block;
      vertical-align:middle;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      margin-right:10px;
    }
    span {
      display:inline-block;
      vertical-align:middle;
      font-size: 23px;
      font-weight: 500;
      color: #fff;
    }
  }
  .top-bar-item  img{
    margin-right:15px;
  }
  .topbar-headerpic{
    width: 40px;
    height:40px;
  }
  .item1{
    color: #787878;
    margin-right:80px;
  }
  .item1:hover{
    text-decoration: underline;
    color: #999;
  }
</style>
